<template>
	<view>
		<Skeleton v-if="loading" :row="5"></Skeleton>
		<view :hidden="loading" v-if="allDatas.length > 0" :style="pic && 'padding: 100rpx 0 20rpx 20rpx;background: url('+pic+') no-repeat;background-size:cover;'">
			<block v-if="type">
				<view v-if="allDatas.length > 1" class="type-view">
					<view v-for="(item, index) in allDatas" :key="index" class="type-item" :class="{current: typeIndex == index}" @click="changeType(index)">
						<view>{{item.name}}</view>
						<view class="desc" v-if="item.desc">{{item.desc}}</view>
					</view>
				</view>
			</block>
			<block v-if="filter">
				<view class="sort-view">
					<view class="sort-item" :class="{current: allDatas[typeIndex].param.sort == allDatas[typeIndex].sort}" @click="setSort(allDatas[typeIndex].sort)">
						默认
					</view>
					<view class="sort-item" :class="{current: allDatas[typeIndex].param.sort == 4}" @click="setSort(4)">
						热度
					</view>
					<view class="sort-item" :class="{current: allDatas[typeIndex].param.sort == 5 || allDatas[typeIndex].param.sort == 6}"
					@click="setSort(56)">
						<text>价格</text>
						<view class="sort-box">
							<text :class="{active: allDatas[typeIndex].param.sort == 5}" class="icon xiangshang"></text>
							<text :class="{active: allDatas[typeIndex].param.sort == 6}" class="icon xiangxia"></text>
						</view>
					</view>
					<text class="sort-mask icon tongji1" :style="allDatas[typeIndex].param.form.length > 0 && 'color:#45b984;'" @click="mask=!mask"></text>
				</view>
			</block>
			<swiper :current="typeIndex" class="list-box" :style="'height:'+allDatas[typeIndex].height+';'" duration="300" @change="changeTab">
				<swiper-item v-for="(tabItem,tabIndex) in allDatas" :key="tabIndex">
					<scroll-view v-if="tabItem.list.length > 0" class="list-list" :style="tabItem.scroll || 'flex-wrap:wrap;'"
					:scroll-top="scrollTop" :scroll-x="!tabItem.scroll" :scroll-y="tabItem.scroll" @scrolltolower="loadData" :lower-threshold="200">
						<view v-for="(item, index) in tabItem.list" :key="index" :style="('margin:'+margin+'%;width:'+(tabItem.row ? 98-(margin*2) : 48-(margin*2))+'%;') + (tabItem.scroll ? 'float: left;' : (tabItem.row ? 'width:90%;' : 'width:40%;'))"
						:class="tabItem.row ? 'list-one' : 'list-two'" @click="$goto(path+'?id='+item.id)">
							<view class="top" v-if="item.data8">
								{{item.data8}}
							</view>
							<view :class="tabItem.row ? 'itemFlex' : ''">
								<view class="pic" v-if="item.data1 || item.data2">
									<image v-if="item.data1" :src="item.data1" mode="scaleToFill" lazy-load="true" @error="$imageError(item)"></image>
									<view class="status" v-if="item.data2">{{item.data2}}</view>
								</view>
								<view class="right">
									<view class="info" v-if="item.data3 || item.data4">
										<view class="title" v-if="item.data3">{{item.data3}}</view>
										<view class="cate" v-if="item.data4">{{item.data4}}</view>
									</view>
									<view class="info" v-if="item.data5 || item.data6">
										<view class="money" v-if="item.data5">{{item.data5}}</view>
										<view class="hits" v-if="item.data6">{{item.data6}}</view>
									</view>
									<view class="info" v-if="item.data7">
										<view class="desc">{{item.data7}}</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view v-else class="empty">
						<view class="icon hezi"></view>
						<view>暂无数据</view>
					</view>
					<view v-if="tabItem.list.length > 6 && tabItem.scroll" class="gotop">
						<button class="gotop-btn" @click="goTop"><text class="icon xiangshang"></text></button>
					</view>
				</swiper-item>
			</swiper>
			<view v-if="filter" class="filter-mask" :style="'top:'+filterTop+'rpx;bottom:'+filterBottom+'rpx;'" :class="mask ? 'show' : 'none'"
			@click="mask=!mask">
				<view class="filter-content" :class="mask ? 'show' : 'none'" @click.stop.prevent="{}" @touchmove.stop.prevent="{}">
					<scroll-view scroll-y class="filter-list">
						<FilterItem v-if="url=='product' && !datas[typeIndex].param.cate_id" v-model="allDatas[typeIndex].param" prop="cate_id" :datas="cates" title="产品类目"></FilterItem>
						<block v-for="(item,findex) in forms" :key="findex">
							<block v-if="item.type == 'select' || item.type == 'checkbox' || item.type == 'radio'">
								<FilterItem v-model="allDatas[typeIndex].param.form" :prop="item.field" :multiple="item.multiple" :datas="item.datas" :title="item.name"></FilterItem>
							</block>
							<block v-if="item.type == 'textarea' || item.type == 'input' || item.type == 'datetime'">
								<view class="list">
									<view class="title">{{item.name}}</view>
									<view class="item"><input v-model="allDatas[typeIndex].param.form[item.field]" :placeholder="'请输入'+item.name" /></view>
								</view>
							</block>
							<block v-if="item.type == 'tree'">
								<view class="list">
									<view class="title">{{item.name}}</view>
									<view class="item"><input v-model="allDatas[typeIndex].param.form[item.field]" :placeholder="'请输入'+item.name" /></view>
								</view>
							</block>
						</block>
						<view class="btn-list">
							<button class="btn-confirm" @click="mask=!mask;loadData('refresh')">确认</button>
							<button class="btn-cancel" @click="mask=!mask">取消</button>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import FilterItem from './filterItem'
	export default {
		components: {
			FilterItem
		},
		props: {
			url: String,
			path: String,
			pic: String,
			type: {
				type: Boolean,
				default: false
			},
			filter: {
				type: Boolean,
				default: false
			},
			margin: {
				type: Number,
				default: 0
			},
			datas: Array
		},
		data() {
			return {
				loading : true,
				keyword: '',
				cates: getApp().globalData.config.cates,
				filterTop: 0,
				filterBottom: 0,
				topHeight: 0,
				allDatas: [],
				typeIndex: 0,
				mask: false,
				scrollTop: 0,
				showField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data8']
			}
		},
		computed: {
			forms() {
				let form = []
				if (this.allDatas[this.typeIndex] && this.allDatas[this.typeIndex].param && this.allDatas[this.typeIndex].param.form_id > 0) {
					let paramForm = {}
					let formInfo = this.$getConfig('forms',this.allDatas[this.typeIndex].param.form_id)
					formInfo.data.forEach(vv => {
						form.push(vv)
						if (vv.type == 'select' || vv.type == 'checkbox' || vv.type == 'radio') {
							paramForm[vv.field] = vv.multiple ? [] : 0
						} else if (vv.type == 'textarea' || vv.type == 'input' || vv.type == 'datetime') {
							paramForm[vv.field] = ''
						} else if (vv.type == 'tree') {
							paramForm[vv.field] = ''
						}
					})
					this.allDatas[this.typeIndex].param.form = Object.assign(paramForm, this.allDatas[this.typeIndex].param.form)
				}
				return form
			}
		},
		mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.topHeight = res.statusBarHeight * (750 / res.windowWidth)
				}
			})
			let pages = getCurrentPages()
			let currentPage = pages[pages.length - 1]
			if (currentPage.options.typeIndex) {
				this.typeIndex = currentPage.options.typeIndex
			}
			if (currentPage.options.keyword) {
				this.keyword = currentPage.options.keyword
			}
			//#ifdef MP
			let style = this.$parent.style
			//#endif
			//#ifdef H5
			let style = this.$parent.$parent.style
			//#endif
			style.forEach(v => {
				if (v.sign == 'topBox') {
					this.topHeight += 81
					this.filterTop += this.topHeight
				}
				if (v.sign == 'tabBar') {
					this.topHeight += 101
					this.filterBottom += 101
				}
			})
			if (this.type) {
				this.topHeight += 81
			}
			if (this.filter) {
				this.topHeight += 61
			}
			this.create()
			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		methods: {
			formatItem(item, field) {
				if (item[field] != undefined) {
					return item[field]
				} else {
					let data = ''
					if (field.indexOf('form->') != -1) {
						let formfield = field.replace('form->', '')
						if (this.forms && item.form) {
							this.forms.forEach(v => {
								if (v.field == formfield) {
									if (v.type == 'select' || v.type == 'checkbox' || v.type == 'radio') {
										v.datas.forEach(vv => {
											if (vv.id == item.form[formfield]) {
												data = vv.name
											}
										})
									} else if (v.type == 'textarea' || v.type == 'input' || v.type == 'datetime') {
										data = item.form[formfield]
									} else if (v.type == 'tree') {
										data = item.form[formfield]
									}
								}
							})
						}
					} else if (field.indexOf('->') != -1) {
						let arr = field.split('->')
						if (item[arr[0]]) {
							if (Array.isArray(item[arr[0]])) {
								data = item[arr[0]][0][arr[1]]
							} else {
								data = item[arr[0]][arr[1]]
							}
						}
					}
					return data
				}
			},
			create() {
				this.allDatas = JSON.parse(JSON.stringify(this.datas))
				this.allDatas.forEach(v => {
					v.hasmore = true
					v.list = []
					v.form = []
					v.field = v.field || {}
					v.param = Object.assign({
						keyword: this.keyword,
						sort: 2,
						form: {},
						page: 0,
						pageSize: 20
					}, v.param)
					v.sort = v.param.sort
					let height = 30
					height += v.field.data1 ? 230 : 0
					height += (v.field.data3 || v.field.data4) ? 46 : 0
					height += (v.field.data5 || v.field.data6) ? 46 : 0
					height += v.field.data7 ? 46 : 0
					height += v.field.data8 ? 46 : 0
					height = v.row ? 168 : height / 2
					if (v.scroll) {
						v.height = v.param.pageSize > 10 ? 'calc(100vh - ' + this.topHeight + 'rpx)' : v.param.pageSize * height +
							'rpx'
					} else {
						v.height = height * 2 + 'rpx'
					}
				})
				this.loadData('refresh')
			},
			async loadData(action = 'add') {
				if (action == 'refresh') {
					this.allDatas[this.typeIndex].list = []
					this.allDatas[this.typeIndex].param.page = 0
					this.allDatas[this.typeIndex].hasmore = true
				}
				if (this.allDatas[this.typeIndex].hasmore && this.url) {
					this.allDatas[this.typeIndex].param.page++
					let list = await this.$api('GET', this.url, this.allDatas[this.typeIndex].param)
					if (list.data.length > 0) {
						list.data.forEach(v => {
							let obj = v
							this.showField.forEach(key => {
								if (this.allDatas[this.typeIndex].field[key]) {
									obj[key] = (this.allDatas[this.typeIndex].prefix[key] || '') + this.formatItem(v, this.allDatas[this.typeIndex]
										.field[key])
								} else {
									obj[key] = this.allDatas[this.typeIndex].prefix[key] || ''
								}
							})
							this.allDatas[this.typeIndex].list.push(obj)
						})
						if (!this.allDatas[this.typeIndex].load || list.data.length < this.allDatas[this.typeIndex].param.pageSize) {
							this.allDatas[this.typeIndex].hasmore = false
						}
					} else {
						this.allDatas[this.typeIndex].hasmore = false
					}
				}
				this.$set(this.allDatas, this.typeIndex, this.allDatas[this.typeIndex])
				setTimeout(() => {
					this.loading = false
				}, 100)
			},
			changeType(e) {
				this.typeIndex = e
			},
			changeTab(e) {
				this.typeIndex = e.target.current
				if (this.allDatas[this.typeIndex].hasmore) {
					this.loadData('refresh')
				}
			},
			setSort(sort) {
				if (sort == 56) {
					this.allDatas[this.typeIndex].param.sort = (this.allDatas[this.typeIndex].param.sort == 5 ? 6 : 5)
				} else {
					this.allDatas[this.typeIndex].param.sort = sort
				}
				this.loadData('refresh')
			},
			goTop() {
				this.scrollTop = 1
				this.$nextTick(function() {
					this.scrollTop = 0
				})
			}
		}
	}
</script>

<style lang='scss'>
	.type-view {
		display: flex;
		height: 80rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		z-index: 1;

		.type-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: $font-color-dark;
			position: relative;
			margin: 0 5rpx;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 100%;
					height: 0;
					border-bottom: 5rpx solid $base-color;
				}
			}

			.desc {
				line-height: 24rpx;
				font-size: 20rpx;
				color: #909399;
			}
		}
	}

	.sort-view {
		display: flex;
		height: 60rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		z-index: 1;

		.sort-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 26rpx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;
			}
		}

		.sort-box {
			display: flex;
			flex-direction: column;

			.icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 12rpx;
				margin-left: 4rpx;
				font-size: 16rpx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}
		}

		.sort-mask {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80rpx;
			position: relative;
			font-size: 30rpx;
			color: #555;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1rpx solid #ddd;
				width: 0;
				height: 36rpx;
			}
		}
	}

	.list-box {
		width: 100%;
		background: #f5f5f5;

		.list-list {
			display: flex;
			white-space: nowrap;
			height: 100%;
			position: relative;

			.top {
				display: block;
				width: 100%;
				height: 40upx;
				font-size: 24upx;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #eee;
				overflow: hidden;
				color: #666666;
			}

			.list-one {
				position: relative;
				background: #fff;
				width: 98%;
				padding: 1%;
				border-radius: 10upx;
				display: inline-block;
				border-bottom: 1rpx solid #eee;

				.itemFlex {
					width: 100%;
					display: flex;
				}

				.pic {
					width: 250upx;
					height: 138upx;
					border-radius: 3px;
					border: 1rpx solid #F5F5F5;
					overflow: hidden;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						opacity: 1;
					}
				}

				.right {
					width: calc(100% - 250upx);
				}

				.title {
					font-size: 26upx;
					color: #333;
					letter-spacing: 0;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.cate {
					padding: 0 10upx;
					background-color: red;
					height: 36upx;
					line-height: 36upx;
					background-image: linear-gradient(to right, #9B30FF 0%, #FF00FF 100%);
					font-size: 24upx;
					color: #fff;
					border-radius: 18upx 3upx 18upx 3upx;
				}

				.info {
					padding-left: 20upx;
					height: 46upx;
					line-height: 46upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.status {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 46upx;
					line-height: 46upx;
					text-align: center;
					font-size: 28upx;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
				}

				.hits {
					font-size: $font-sm;
					color: #999;
				}

				.money {
					font-size: 36upx;
					color: $uni-color-primary;
				}

				.desc {
					width: 100%;
					letter-spacing: 0;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-all;
					word-break: break-all;
					white-space: pre-wrap;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 24upx;
					font-size: 22upx;
					color: #909399;
				}
			}

			.list-two {
				display: inline-block;
				position: relative;
				background: #fff;
				width: 48%;
				padding: 1%;
				border-radius: 10upx;

				.pic {
					width: 100%;
					height: 230upx;
					border-radius: 3px;
					overflow: hidden;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						opacity: 1;
					}
				}

				.close {
					position: absolute;
					top: 5upx;
					right: 10upx;
					text-align: right;

					text {
						font-size: $font-lg+10upx;
					}
				}

				.title {
					color: #333;
					letter-spacing: 0;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					font-size: 26upx;
				}

				.cate {
					padding: 0 10upx;
					background-color: red;
					height: 36upx;
					line-height: 36upx;
					background-image: linear-gradient(to right, #9B30FF 0%, #FF00FF 100%);
					font-size: 24upx;
					color: #fff;
					border-radius: 18upx 3upx 18upx 3upx;
				}

				.status {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 46upx;
					line-height: 46upx;
					text-align: center;
					font-size: 28upx;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
				}

				.hits {
					font-size: $font-sm;
					color: #999;
				}

				.info {
					height: 46upx;
					line-height: 46upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.money {
					font-size: 36upx;
					color: $uni-color-primary;
				}

				.desc {
					width: 100%;
					letter-spacing: 0;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					word-break: break-all;
					white-space: pre-wrap;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 24upx;
					font-size: 22upx;
					color: #909399;
				}
			}
		}
	}
	.filter-mask {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 2;
		opacity: 0;
		transition: 1s;

		.filter-content {
			max-width: 590upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: 1s;
		}

		&.none {
			display: none;
		}

		&.show {
			opacity: 1;

			.filter-content {
				transform: translateX(0);
			}
		}

		.filter-list {
			display: flex;
			flex-direction: column;
			height: 100%;

			.list {
				padding: 10upx;
				border-bottom: 1px solid #ddd;
				text-align: left;
				font-size: 24upx;
				color: #555;

				.active {
					color: #fff;
					background: $base-color;
				}

				.title {
					width: 100%;
					padding: 10upx;
					font-size: 30upx;

					text {
						float: right;
						padding: 0 30upx;
						color: #ccc;
					}
				}

				.item {
					text-align: center;
					width: 100%;
					display: inline-block;
					margin: 10upx;
					background: #eee;
					padding: 10upx 5upx;
					border-radius: 5upx;
				}
			}

			.btn-list {
				display: flex;
				justify-content: space-between;

				.btn-confirm {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 200upx;
					height: 60upx;
					margin: 50upx 30upx;
					font-size: $font-lg;
					color: #fff;
					background-color: $base-color;
					border-radius: 10upx;
					box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
				}

				.btn-cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 200upx;
					height: 60upx;
					margin: 50upx 30upx;
					font-size: $font-lg;
					color: #555;
					background-color: #eee;
					border-radius: 10upx;
				}
			}
		}
	}
</style>
